<template>
  <div id="admin-role-form-container">
    <h3>{{ formData.id == 0 ? "新增角色" : "修改角色" }}</h3>
    <el-form :model="formData" ref="adminRoleForm" label-width="100px" class="demo-ruleForm" :rules="rules">
      <el-form-item label="账号" prop="account">
        <el-input v-model="formData.account" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="roleName">
        <el-select v-model="formData.roleManagementId" placeholder="请选择">
          <el-option v-for="role in roles" :label="role.name" :key="role.id" :value="role.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账号状态" prop="accountStatus">
        <el-radio-group v-model="formData.accountStatus">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">冻结</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="handleSave('adminRoleForm')">保存</el-button>
        <el-button @click="handleCancel('adminRoleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { modifyAdminUser, addAdminUser } from "../api/index";
export default {
  name: "adminRoleForm",
  props: {
    formData: Object,
    roles:Array
  },
  data() {
    return {
      rules: {
        account:[
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          },
        ],
        name: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
        ],
        roleName: [
          {
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }
        ],
        accountStatus: [
          {
            required: true,
            message: '请选择账户状态',
            trigger: 'blur'
          }
        ]
      },
    };
  },
  created() {
  },
  methods: {
    handleCancel(formName) {
      this.$emit("formCancel");
      this.$refs[formName].resetFields();
    },
    handleSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
      const callback = res => {
        // console.log(res.data);
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: "保存成功",
            duration: 1500,
            onClose: () => {
              this.handleCancel();
              this.$emit("reloadData");
            }
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1500
          });
        }
      };
      if (this.formData.id == 0) {
        // console.log(this.formData);
        addAdminUser(this.formData).then(callback);
      } else {
        modifyAdminUser(this.formData).then(callback);
      }
    },
  }
};
</script>

<style scoped>
#admin-role-form-container {
  width: 500px;
  height: 400px;
  background: #fff;
  position: absolute;
  bottom: 50%;
  left: 40%;
  transform: translate(-40%, 50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 8px;
  color: #515a6e;
}

#admin-role-form-container h3 {
  align-self: flex-start;
  margin-left: 25px;
  margin-top: 10px;
}

.btn {
  margin-left: 100px;
}
</style>
